<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 用于渲染代码逻辑  -->
        {{ msg }}

        <button v-on:click="count--">-</button>
        {{ count }}
        <button @click="count++">+</button>
        </hr>
        <ul>
            <li v-for="(item,index) in fruits"> {{index + 1}} - {{ item }}</li>
        </ul>
        </hr>
        </hr>

        <ul>
            <li v-for="e in books">
                << {{ e.name }}>> 作者 ：{{e.author}} &nbsp; <button @click='del(e.id)'> 删除</button>
            </li>
        </ul>

        </hr>
        </hr>

        用户名：<input type="text" v-model="username"><br>
        密  码：<input type="text" v-model="password">

        <br><br>-------------------------------
        </hr>
        </hr><br>


        <input type="text" @keyup.enter="addTask" v-model="inputValue"><button @click="addTask"> 添加任务</button>
        <ul>
            <li v-for="(e,index) in notes" :key="e.id">
                
              <span  @click="selectThis(e)">{{index + 1}}.  {{e.thing}}</span>
              <button @click="delTask(e.id)" style="justify-content: right;"> x </button>
            </li>
        </ul><br>-------------------------------
        <br><br>-------------------------------
        </hr>
        </hr><br>


        <ul class="myul">
            <li v-for="(e,index) in tags" :class="{myli:index === activeIndex}" @click="clickTag(index)" :key="e.id">
               {{e.thing}} &nbsp;
                
            </li>
        </ul>







    </div>
    


    <script src="./vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello',
                count: 1,
                fruits: ['apple', 'pear', 'banana', 'watermelon'],
                books: [
                    { id: 1, name: '水浒传', author: '施耐庵' },
                    { id: 2, name: '西游记', author: '罗贯中' },
                    { id: 3, name: '红楼梦', author: '曹雪芹' }],
                isShow: true,
                username:'',
                password:'',
                notes:[
                    {id:1, thing:'跑步60分钟'},
                    {id:2, thing:'俯卧撑20分钟'},
                    {id:3, thing:'唱歌半小时'},

                ],
                tags:[
                    {id:1, thing:'京东秒杀'},
                    {id:2, thing:'每日特价'},
                    {id:3, thing:'品类秒杀'},

                ],
                inputValue:'',
                activeIndex:0,
            },
            methods: {
                del(id) {
                    this.books = this.books.filter(e => e.id != id)
                },
                addTask(){
                    // this.notes.push({id:new Date(),thing:this.inputValue})
                    this.notes.unshift({id:new Date(),thing:this.inputValue})
                },
                selectThis(note){
                    this.inputValue = note.thing
                },
                delTask(id) {
                    const arr = this.notes.filter(e=>e.id != id)
                    this.notes = arr
                },
                clickTag(index){
                    this.activeIndex = index
                },
            }
        })

    </script>

    <style>
        .myul{
            list-style-type: none;
            display: flex;
           
        }
        .myli{
            /* margin: 10px;; */
            background-color: red;
        }

    </style>
</body>

</html>